<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        新增银行卡
      </el-button> -->
    </div>

    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>基本信息</span>

        <el-button
          style="float: right;margin-left: 10px;"
          type="primary"
          size="mini"
          @click="showCode()"
        >二维码
        </el-button>

        <el-button
          type="primary"
          style="float: right;"
          size="mini"
          @click="rateManage()"
        >折扣设置
        </el-button>
        <el-button
          style="float: right;"
          type="primary"
          size="mini"
          @click="imgManage()"
        >图片管理
        </el-button>
        <!--<el-button-->
        <!--style="float: right;"-->
        <!--type="danger"-->
        <!--size="mini"-->
        <!--@click="paySet()"-->
        <!--&gt;支付设置</el-button>-->
        <!-- <el-button
          style="float: right;"
          type="primary"
          size="mini"
          @click="unBind()"
        >取消授权</el-button> -->
      </div>
      <div>
        <el-row>
          <el-col :span="8">
            <div class="grid-content ">
              站点名称：{{ oil.company }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ">
              负责人：{{ oil.name }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ">
              手机号：{{ oil.phone }}
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top:20px">
          <el-col :span="8">
            <div class="grid-content ">
              <!-- 地址：{{ oil.provinceName + oil.cityName + oil.areaName + oil.address }} -->
              地址：{{ oil.address }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ">
              状态：{{ oil.state | stateFilter }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ">
              类型：{{ oil.type | typeFilter }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content "/>
          </el-col>
          <!--<el-col :span="8">-->
            <!--<div class="grid-content ">-->
              <!--短信接收人：{{ oil.receive }}-->
            <!--</div>-->
          <!--</el-col>-->
          <!--<el-col :span="8">-->
            <!--<div class="grid-content ">-->
              <!--创建时间：{{ oil.created }}-->
            <!--</div>-->
          <!--</el-col>-->
        </el-row>
        <!--<el-row style="margin-top:20px">-->
        <!--<el-col :span="8">-->
        <!--<div class="grid-content ">-->
        <!--支付方式：{{ oil.payType | payFilter }}-->
        <!--</div>-->
        <!--</el-col>-->
        <!--<el-col :span="8">-->
        <!--<div class="grid-content ">-->
        <!--京东商户号：{{ oil.jdMrchNo }}-->
        <!--</div>-->
        <!--</el-col>-->
        <!--<el-col :span="8">-->
        <!--<div class="grid-content ">-->
        <!--浦发商户号：{{ oil.pfMrchNo }}-->
        <!--</div>-->
        <!--</el-col>-->
        <!--</el-row>-->
      </div>
    </el-card>

    <el-card
      class="box-card"
      style="margin-top:20px"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <span>油卡信息</span>
      </div>
      <div>
        <el-table
          :key="key"
          :data="tableData"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <!-- <el-table-column
        prop="author"
        label="序号"
        align="center"
        width="80"
        value="scope.$index + 1"
      /> -->
          <el-table-column
            prop="cardNum"
            label="子卡卡号"
            align="center"
            width=""
          />
     <!--     <el-table-column
            label="子卡数量"
            min-width=""
            align="center"
          >
            <template slot-scope="scope">
              <span @click="mainCard(scope.row)"> {{ scope.row.num }}</span>

            </template>
          </el-table-column>-->
          <el-table-column
            label="类型"
            width=""
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.sourceId | typeFilter1 }}
            </template>
          </el-table-column>

          <el-table-column
            label="累积充值"
            min-width=""
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.money }}
            </template>
          </el-table-column>

         <!-- <el-table-column
            prop="oweMoney"
            label="库存金额"
            align="center"
            width=""
          />-->

          <!--<el-table-column-->
            <!--prop="payMoney"-->
            <!--label="实付金额"-->
            <!--align="center"-->
            <!--width=""-->
          <!--/>-->

    <!--      <el-table-column
            label="是否高挂卡"
            width=""
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.isHang | typeFilter }}
            </template>
          </el-table-column>-->
        </el-table>
      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />

    </el-card>
    <el-dialog
      title="支付信息"
      :visible.sync="dialogPay"
      top="10vh"
    >
      <el-form
        ref="pay"
        :rules="rules"
        :model="pay"
        label-position="left"
        label-width="200px"
        style="width: 500px; margin-left:50px;"
      >
        <el-form-item label="支付方式">
          <el-radio-group v-model="pay.payType">
            <el-radio :label="1">京东支付</el-radio>
            <el-radio :label="2">浦发支付</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="京东商户号"
          prop=""
        >
          <el-input v-model="pay.jdMrchNo"/>
        </el-form-item>
        <el-form-item
          label="浦发商户号"
          prop=""
        >
          <el-input v-model="pay.pfMrchNo"/>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogPay = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="editPayDo"
        >
          确认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogCode"
      title="站点二维码"
      style="text-align:center"
    >
      <!-- <qrCode :codeVal="codeVal"></qrCode> -->
      <img
        :src="imageUrl"
        alt=""
      >
    </el-dialog>

  </div>
</template>
<script>
  import {
    tradesList,
    oilDeatil,
    getCode,
    editPay,
    getMainCardList
  } from "@/api/v1";
  import {resetPassword, cooperationUnBind} from "@/api/user";
  import waves from "@/directive/waves"; // Waves directive
  import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
  import {parseTime} from "@/utils";
  import {MessageBox, Message} from "element-ui";
  import {Loading} from "element-ui";

  export default {
    directives: {waves},
    components: {Pagination},
    filters: {
      payFilter(status) {
        switch (status) {
          case 1:
            return "京东支付";
          case 2:
            return "浦发支付";
        }
      },
      typeFilter1(status) {
        switch (status) {
          case 1:
            return "中石油";
          case 2:
            return "中石化";
        }
      },
      typeFilter(status) {
        switch (status) {
          case 1:
            return "加油站";
          case 2:
            return "修理站";
          case 1:
            return "加气站";
          case 2:
            return "总公司";
        }
      },
      stateFilter(status) {
        switch (status) {
          case 0:
            return "开启";
          case 1:
            return "关闭";
        }
      }
    },
    data() {
      return {
        dialogCode: false,
        dialogPay: false,
        imageUrl: "",
        oil: {},
        tableData: [],
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        cooperation: [],
        listQuery: {
          page: 1,
          limit: 20,
          sort: "+id"
        },
        key: 1, // table key
        dialogFormVisible: false,
        dialogFormMoney: false,
        rules: {
          openName: [{required: true, message: "请输入姓名", trigger: "blur"}],
          cardNum: [{required: true, message: "请输入卡号", trigger: "blur"}],
          idCardNum: [
            {required: true, message: "请输入身份证号码", trigger: "blur"}
          ],
          // currentMoney: [{ required: true, message: "请输入提现金额", trigger: "blur" }],
          money: [{required: true, message: "请输入提现金额", trigger: "blur"}],
          payPassword: [
            {required: true, message: "请输入密码", trigger: "blur"}
          ],
          code: [{required: true, message: "请输入验证码", trigger: "blur"}]
        },
        dialogStatus: "",
        textMap: {
          update: "编辑",
          create: "新增"
        },
        temp: {
          cardNum: "",
          openName: "",
          idCardNum: "",
          relationId: "", // 省代或油卡商户id–超管添加必传
          relationType: "" // 类型1为省代，2为油卡商户–超管添加必传
        },
        temp1: {
          cardNum: "",
          openName: "",
          idCardNum: "",
          relationId: "", // 省代或油卡商户id–超管添加必传
          relationType: "", // 类型1为省代，2为油卡商户–超管添加必传
          money: ""
        },
        pay: {
          id: "",
          payType: "",
          jdMrchNo: "",
          pfMrchNo: ""
        }
      };
    },
    watch: {
      checkboxVal(valArr) {
        this.formThead = this.formTheadOptions.filter(
          i => valArr.indexOf(i) >= 0
        );
        this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }
    },

    created() {
      const id = this.$route.query.relationId;
      const uuid = this.$route.query.uuid;
      this.listQuery.cooId = id;
      this.pay.id = id;
      this.oil.uuid = uuid;
      console.log(id);
      const data = {
        id: id
      };
      this.oilDeatil(data);
      this.getList();
    },
    methods: {
      editPayDo() {
        console.log(this.pay);

        this.$refs["pay"].validate(valid => {
          if (valid) {
            const tempData = Object.assign({}, this.pay);
            editPay(tempData).then(() => {
              // for (const v of this.list) {
              //   if (v.id === this.pay.id) {
              //     const index = this.list.indexOf(v);
              //     this.list.splice(index, 1, this.pay);
              //     break;
              //   }
              // }
              this.dialogPay = false;
              this.$notify({
                title: "成功",
                message: "更新成功",
                type: "success",
                duration: 2000
              });
              this.oilDeatil(this.oil);
            });
          }
        });
      },

      paySet() {
        this.pay = this.oil;
        this.dialogPay = true;
        this.$nextTick(() => {
          this.$refs["pay"].clearValidate();
        });
      },
      showCode() {
        const data = {};
        data.pages = "pages/oilDetail/oilDetail";
        data.phone = this.oil.phone;
        data.uuid = this.oil.uuid;
        const loadingInstance = Loading.service(this.options);
        getCode(data).then(res => {
          loadingInstance.close();
          //  http://kamoimgs.oss-cn-beijing.aliyuncs.com/1555897173027.png
          this.imageUrl =
            "http://kamoimgs.oss-cn-beijing.aliyuncs.com/" + res.data;
          // this.imageUrl="http://km-onlie-images.oss-cn-beijing.aliyuncs.com/"+res.data;
          this.dialogCode = true;
        });
      },
      oilDeatil(data) {
        oilDeatil(data).then(res => {
          this.oil = res.data;
          console.log(this.tableData);
        });
      },
      rateManage() {
        const data = this.oil;
        this.$router.push({
          path: "/rateManage",
          query: {
            relationId: data.id,
            relationType: 1,
            currentMoney: data.currentMoney,
            phone: data.phone,
            name: data.name
          }
        });
      },
      imgManage() {
        const data = this.oil;
        this.$router.push({
          path: "/imgManage",
          query: {
            relationId: data.id,
            relationType: 1,
            currentMoney: data.currentMoney,
            phone: data.phone,
            name: data.name
          }
        });
      },
      unBind(row) {
        this.$confirm(
          "此操作将取消该微信账号在小程序端的所有授权登陆, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            const data = {
              phone: this.$route.query.phone
            };
            cooperationUnBind(data).then(res => {
              console.log(res);
              this.$notify({
                title: "消息",
                message: res.msg,
                type: "success",
                duration: 2000
              });
            });
          })
          .catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除'
            // });
          });
      },
      resetTemp() {
        this.temp.cardNum = "";
        this.temp.openName = "";
        this.temp.idCardNum = "";
      },
      handleCreate() {
        this.resetTemp();
        console.log(this.temp);
        this.dialogStatus = "create";
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs["temp"].clearValidate();
        });
      },
      getCode() {
        var query = {phone: this.phone};
        getPhoneCode(query).then(res => {
          Message({
            message: res.msg || "success",
            type: "success",
            duration: 2 * 1000
          });
        });
      },

      getList() {
        this.listLoading = true;
        this.listQuery.type = 2; //2为子卡
        this.listQuery.cooId = this.$route.query.relationId;
        getMainCardList(this.listQuery).then(res => {
          this.tableData = res.data.records;
          this.total = Number(res.data.total);
          console.log(this.tableData);
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false;
          }, 1.5 * 1000);
        });
      },
      createData() {
        this.$refs["temp"].validate(valid => {
          if (valid) {
            console.log(this.temp);
            addBankCard(this.temp).then(res => {
              // this.list.unshift(this.temp);
              this.dialogFormVisible = false;
              this.$notify({
                title: "成功",
                message: res.msg,
                type: "success",
                duration: 2000
              });
              this.getList();
            });
          }
        });
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      }
    }
  };
</script>

